<template>
  <div class="global-overview" ref="parent">
    <svg class="bar-overview">

    </svg>
  </div>
</template>

<script>
import d3 from "d3";
import util from "util";
import randomcolor from "randomcolor";
import host from "../xhr";
import overview_foobar from "../foobar-data/overview-v2";

export default {
  data() {
    return {};
  },
  mounted() {
    const _parent = d3.select(this.$refs["parent"]);
    const svg = _parent.select("svg.bar-overview");
    const outer_height = 400,
      outer_width = 700;
    const padding = {
      left: 50,
      right: 30,
      top: 30,
      bottom: 30,
      center: 10
    };
    const width = outer_width - padding.left - padding.right,
      height = outer_height - padding.top - padding.bottom;
    svg.attr("width", outer_width).attr("height", outer_height);
    const dateScale = d3.scale
      .ordinal()
      .rangeBands([padding.left, padding.left + width], 0.03);
    const typeScale = d3.scale
      .linear()
      .range([padding.top, padding.top + height / 2 - padding.center / 2]);
    const sngScale = d3.scale
      .linear()
      .range([
        padding.top + height / 2 + padding.center / 2,
        padding.top + height
      ]);
    const colorScale = d3.scale.category10().domain([-Infinity, Infinity]);
    /* .range(
        randomcolor({
          count: 100,
          luminosity: "bright",
          format: "rgba",
          alpha: 0.7,
          // hue:"purple",
          seed: "hujimiya"
        })
      ); */
    const dateAxis = d3.svg.axis().orient("bottom");
    const sngAxis = d3.svg.axis().orient("left");
    const typeAxis = d3.svg.axis().orient("left");
    const g_date = svg
      .append("g")
      .classed("axis", true)
      .attr("transform", `translate(0,${padding.top + height / 2})`);
    const g_sng = svg
      .append("g")
      .classed("axis", true)
      .attr("transform", `translate(${padding.left},0 )`);
    const g_type = svg
      .append("g")
      .classed("axis", true)
      .attr("transform", `translate(${padding.left},0 )`);

    const sngStack = d3.layout
      .stack()
      .values(d => d.values)
      .x(d => d.$date_E8)
      .y(d => d["COUNT(SNG_label)"]);
    const typeStack = d3.layout
      .stack()
      .values(d => d.values)
      .x(d => d.$date_E8)
      .y(d => d["count(type)"]);

    const that = this;
    d3.json(host("overview/v2")).get((err, data) => {
      // let data = data;
      if (err) {
        console.error(err);
        that.$notify.error("[overview]mysql connect failed;try use test data");
        data = overview_foobar;
      }
      const date_range = data["date_range"];
      const sng_data = data["sng_bar_data"];
      const type_data = data["type_bar_data"];
      let s = sngStack(sng_data);
      typeStack(type_data);
      // debugger;
      dateScale.domain(date_range);
      sngScale.domain([
        0,
        d3.max(sng_data[sng_data.length - 1].values, d => d.y0 + d.y)
      ]);
      // debugger
      typeScale.domain([
        d3.max(type_data[sng_data.length - 1].values, d => d.y0 + d.y),
        0
      ]);

      dateAxis.scale(dateScale);
      sngAxis.scale(sngScale);
      typeAxis.scale(typeScale);

      // g_date.call(dateAxis);
      g_sng.call(sngAxis);
      g_type.call(typeAxis);

      const sngGroups = svg
        .append("g")
        .classed("group-parent", true)
        .selectAll("g")
        .data(sng_data)
        .enter()
        .append("g")
        .classed("group", true)
        .style("fill", (d, i) =>
          randomcolor({
            seed: d.sng * 1000 + "" + i,
            hue: "blue",
            luminosity: "light"
          })
        );
      const sngRects = sngGroups
        .selectAll("rect.bar")
        .data(d => d.values)
        .enter()
        .append("rect")
        .classed("bar", true)
        .attr("x", d => dateScale(d.$date_E8))
        .attr("width", dateScale.rangeBand())
        .attr("y", d => {
          let s = sngScale(d.y0);
          // debugger;
          return s;
        })
        .attr("height", d => {
          let s = sngScale(d.y0);
          height;
          padding.top;
          // debugger
          return sngScale(d.y0 + d.y) - s;
        })
        .attr("fill-opacity", 1)
        .attr("comment", d => util.inspect(d));

      const typeGroups = svg
        .append("g")
        .classed("group-parent", true)
        .selectAll("g")
        .data(type_data)
        .enter()
        .append("g")
        .classed("group", true)
        .style("fill", (d, i) =>
          randomcolor({
            seed: d.type * 1000 + "" + i,
            hue: "#000",
            luminosity: "light"
          })
        );
      const typeRects = typeGroups
        .selectAll("rect.bar")
        .data(d => d.values)
        .enter()
        .append("rect")
        .classed("bar", true)
        .attr("x", d => dateScale(d.$date_E8))
        .attr("width", dateScale.rangeBand())
        .attr("y", d => {
          // debugger
          return typeScale(d.y0 + d.y);
        })
        .attr("height", d => {
          // debugger;
          typeScale(d.y);
          // debugger
          return typeScale.range()[1] - typeScale(d.y);
        })
        .attr("fill-opacity", 1)
        .attr("comment", d => util.inspect(d));
      const center_marks_group = svg.append("g").classed("center-marks", true);
      center_marks_group
        .selectAll("rect.center-mark")
        .data(sng_data[0].values)
        .enter()
        .append("rect")
        .classed("center-mark", true)
        .attr("x", d => {
          // debugger;
          return dateScale(d.$date_E8);
        })
        .attr("width",dateScale.rangeBand())
        .attr("y",padding.top+height/2-padding.center/2+padding.center*.1)
        .attr("height",padding.center-padding.center*0.2)
        .attr("fill-opacity",0.5)
    });
  }
};
</script>

<style lang="scss">
.global-overview {
  svg.bar-overview {
    background-color: #ff008005;
    g.axis {
      font: 10px sans-serif;
      path,
      line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
    }
  }
}
</style>
